<template>
	<view class="zxc_centent">
		<view class="big_box">   
			<view class="banner">
				<u-swiper
				          :list="list1"
						   radius="0"
						   height="150"
						   :radius="10"
				  ></u-swiper>
			</view>
			
				<view class="ik">
					<view class="ik_sm">
						<view class="ik_sm_left">
							姓名
						</view>
						<view class="ik_sm_right">
							<input type="text" class="input" placeholder="请输入姓名"/>
						</view>
					</view>
					<view class="ik_sm">
						<view class="ik_sm_left">
							性别
						</view>
						<view class="ik_sm_right">
							  <u-radio-group
							    v-model="radiovalue1"
							    placement="row"
							    @change="groupChange"
						
							  >
							    <u-radio
							      :customStyle="{marginBottom: '8px'}"
							      v-for="(item, index) in radiolist1"
							      :key="index"
							      :label="item.name"
							      :name="item.name"
								   shape="circle" 
								   activeColor="#07c160"
							    >
							    </u-radio>
							  </u-radio-group>
						</view>
					</view>
					<view class="ik_sm">
						<view class="ik_sm_left">
							手机号(账号)
						</view>
						<view class="ik_sm_right">
							<input type="number" class="input" placeholder="请输入手机号"/>
						</view>
					</view>
					<view class="ik_sm">
						<view class="ik_sm_left">
							登录密码
						</view>
						<view class="ik_sm_right">
							<input type="text" class="input" placeholder="请输入登录密码"/>
						</view>
					</view>
					<view class="ik_sm">
						<view class="ik_sm_left">
							意向合作城市
						</view>
						<view class="ik_sm_right">
							<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
							        <text v-if="!regionName">
															 {{defaultRegion[1]}}
														 </text> 
														 <text v-else>{{regionName}}</text>
							 </pick-regions>
							<image src="../../static/images/right.png" class="right_img" mode="widthFix"></image>
						</view>
					</view>
				</view>
			
			
			<view class="odl">
				<view class="label">本人近期照片</view>
				<view class="uPImg">
					<view class="shangchuan">
						<view class="sc2" v-for="(item, index) in imgList" :key="index">
							<image class="del" @click="del(index)" src="@/static/orderComplaint/del.png" mode="">
							</image>
							<image class="Img3" :src="fileip+item" mode=""></image>
						</view>
						<view class="sc2" v-if="imgList.length < 10" @click="upload">
							<image class="sc3" src="@/static/orderComplaint/add.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="jv">提交申请</view>
			
		</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default{
		components:{
			 pickRegions
		},
		data (){
			return {
				list1: [{
				                   url: '/static/images/zhao_banner.png'
				               }],
				regionName:'',
				 region:[],
				 defaultRegion:['广东省','广州市','番禺区'],
				 defaultRegionCode:'440113',
				radiolist1: [{
				            name: '男',
				            disabled: false
				          },
				            {
				              name: '女',
				              disabled: false
				            },
				          ],
				          radiovalue1: '男',
				/* 上传图片 */
				imgList: [],
				token:'',
				actionUrl:'',
				fileip:''
			}
		},
		onShow (){
			this.fileip=this.$api.ipimg;   //设置文件ip地址
			this.actionUrl=this.$api.actionUrls;   //设置请求地址,多文件上传接口
			var token =uni.getStorageSync('token');
			this.token=token;
		},
		methods:{
			groupChange(n) {
			     console.log('groupChange', n);
			   },
			// 获取选择的地区
			handleGetRegion(region){
			    this.region = region;
							 this.regionName=this.region[1].name;
							 console.log(this.region)
			  },
			  // 点击上传图片
		// 点击上传图片
		upload() {
			var _this=this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
				
					var tempFilePaths = res.tempFilePaths;
					console.log(tempFilePaths);
					
					for (let i = 0; i < tempFilePaths.length; i++) { //多图上传
				
					
					uni.uploadFile({
						url: _this.actionUrl,
						filePath: tempFilePaths[i],
						header:{
							'Authorization':_this.token
						},
						name: 'file',
						success: uploadFileRes => {
							console.log('上传图片', JSON.parse(uploadFileRes.data));
							var data=JSON.parse(uploadFileRes.data)
							_this.imgList.push(data.data.fileName);
						
						},
						fail(err) {
							console.log(err);
						}
					});
					}
				}
			});
		},
			  
			  // 删除图片
			  del(index) {
			  	this.imgList.splice(index, 1);
			  	console.log(this.imgList);
			  },
		}
	}
</script>

<style lang="scss">
	::v-deep .u-radio{
		margin-left:30upx;
	}
	.big_box{
		width:93%;
		margin:0 auto;
	}
	.odl{
		background-color: #fff;
		border-radius: 10upx;
		padding:20upx 30upx 40upx;
		margin-top:30upx;
	}
.ik{
		padding:0 30upx;
		margin-top:30upx;
		border-radius: 10upx;
		background-color: #FFF;
	}
	.ik_sm{
		padding:30upx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom:1px solid #ededed;
		font-size:28upx;
	}
	.ik_sm_right{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.input{
		width:300upx;
		height:50upx;
		text-align: right;
		font-size:28upx;
	}
	.tou_img{
		width:80upx;
		height:80upx;
		border-radius: 100upx;
	}
	.right_img{
		width:15upx;
		margin-left:20upx;
	}
	.re_img{
		width:30upx;
		margin-left:20upx;
	}
	.ole{
		padding:20upx 0;
	}
	.jv{
		background-color: #07c160;
		color:#fff;
		text-align: center;
		padding:20upx 0;
		border-radius: 100upx;
		width:92%;
		margin:50upx auto;
	}
	.label{
		font-size:28upx;
		margin:10upx 0 20upx 0;
		font-weight: 700;
	}
	.uPImg {
		width: 100%;
	}
	
	.shangchuan {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	
		.sc2 {
			width: 190rpx;
			height: 190rpx;
			border-radius: 10rpx;
			background-color: #dadfef;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10rpx;
			position: relative;
			// background-color: #4CD964;
		}
	
		.Img3 {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	
		.del {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			z-index: 100;
			top: 0rpx;
			right: 0;
		}
	
		.sc3 {
			width: 96rpx;
			height: 96rpx;
			border-radius: 10rpx;
		}
	}
</style>